<template>
	<view>
	<view style="margin-top: 20rpx;padding: 20rpx 20rpx;">
			<view class='row'  v-for='(item,index) in list' :key='index' @tap="play(item.vod.vod_id,item.vod_index)" >
				<view style="width: 220rpx;">
					<image class='vodimg'  :src='upload+item.vod.vod_pic' mode='aspectFill'></image>
				</view>
				<view style="font-size: 30rpx;padding: 15rpx 15rpx;font-weight:700;" > 
				  <text class="title" style="-webkit-line-clamp: 1;">{{item.vod.vod_name}}</text>
				  <text class="title" style="color:hotpink;">第{{Number(item.vod_index) +1}}集</text>
				  <text class="title" style="-webkit-line-clamp: 3;font-weight:400;font-size: 27rpx;color:#C5C4C4;">
				  		{{item.vod.vod_blurb}}
				  </text>
				</view>
			</view>
		</view>
		<null class="null" v-if="!load && list.length == 0" info="暂无相关数据!"></null>
		<load class="load" :style="{opacity:load ? '1' : '0'}"></load>
		</view>
	</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				load: true,
				list:[],
				upload: getApp().upload
			}
		},
		computed:{
			
		},
		onLoad(data){
			this.getdata(true)
		},
		onReady() {
			
		},
		methods: {  
			getdata(is) {
				if (is === true) this.list = [];
				this.load = true;
				this.GetJson(this.ip + 'Duanju_api.php', 'POST', {
					token:this.$store.state.userinfo.token,
					type:'get_record',
					num: this.list.length,
				}, e => {
					console.log(e)
					this.load = false;
					uni.stopPullDownRefresh();
					if (this.isdata(e)) {
						this.list = [...this.list, ...e.list];
					}
				})
			},
			play(id,index) {
				uni.navigateTo({
					url: './play?id=' + id + '&courseDetailsId=' + index
				})
			},
		},
		onReachBottom() {
			if (this.load == false) this.getdata('is')
		
		},
		onPullDownRefresh() {
			this.getdata(true);
		}
	}
</script>

<style>
page{
	background-color: #000;
}
.vodimg{
		padding: 0 5rpx;
    	width: 150rpx;
    	height: 180rpx;
    	border-radius: 10rpx 10rpx 10rpx 10rpx;
    }
.title {
		color: #FFF;
		display: block;
		margin-top: 10rpx;
		display: flex;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		opacity: .7;
	}
</style>
